import React, { useRef, useState, useEffect } from 'react';
import styles from './FeaturedTemplates.module.css';
import { Template, templateApi } from '@/api/templates';

/**
 * 模板数据接口定义
 * @interface Template
 * @property {number} id - 模板唯一标识
 * @property {string} title - 模板标题
 * @property {string} type - 模板类型，可以是 'H5'|'海报'|'长页'|'表单'|'互动' 等
 * @property {string} cover - 模板封面图片URL
 * @property {string[]} [images] - 可选的模板图片数组，用于H5和长页类型的展示
 */

/**
 * 模板卡片组件
 * 根据不同的模板类型展示不同的交互效果：
 * 1. H5类型：鼠标移动时切换预览图片
 * 2. 长页类型：鼠标悬停时自动向上滚动展示
 * 3. 其他类型：普通图片展示
 */
const TemplateCard: React.FC<{ template: Template }> = ({ template }) => {
  // 当前显示的图片索引（用于H5类型）
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  // 卡片DOM引用
  const cardRef = useRef<HTMLDivElement>(null);

  /**
   * 处理鼠标移动事件
   * 仅对H5类型的模板生效，根据鼠标在卡片上的水平位置切换预览图片
   */
  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (template.type === "H5" && template.images?.length && cardRef.current) {
      // 获取鼠标在卡片内的相对位置
      const rect = cardRef.current.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const width = rect.width;
      // 计算位置百分比
      const percentage = x / width;
      const imageCount = template.images.length;
      // 根据百分比计算应该显示第几张图片
      const newIndex = Math.min(
        Math.floor(percentage * imageCount),
        imageCount - 1
      );
      
      if (newIndex >= 0 && newIndex !== currentImageIndex) {
        setCurrentImageIndex(newIndex);
      }
    }
  };

  /**
   * 处理鼠标进入事件
   * 对于长页类型，CSS会自动开始向上滚动动画
   */
  const handleMouseEnter = () => {
    // 动画通过CSS处理，这里不需要额外操作
  };

  /**
   * 处理鼠标离开事件
   * 重置H5类型的图片索引到第一张
   */
  const handleMouseLeave = () => {
    setCurrentImageIndex(0);
  };

  return (
    <div 
      ref={cardRef}
      className={styles.templateCard}
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
    >
      <div className={`${styles.coverWrapper} ${template.type === "长页" ? styles.longPageWrapper : ''}`}>
        <img 
          src={template.type === "H5" && template.images ? 
            template.images[currentImageIndex] : 
            template.type === "长页" && template.images ? 
              template.images[0] : template.cover
          } 
          alt={template.title} 
          className={`${styles.cover} ${template.type === "长页" ? styles.longPageImage : ''}`}
        />
        <span className={styles.type}>{template.type}</span>
        {/* H5类型特有的进度指示器 */}
        {template.type === "H5" && template.images && (
          <>
            <span className={styles.imageCounter}>
              {currentImageIndex + 1}/{template.images.length}
            </span>
            <div className={styles.progressBar}>
              <div 
                className={styles.progressFill} 
                style={{
                  width: `${((currentImageIndex + 1) / template.images.length) * 100}%`
                }}
              />
            </div>
          </>
        )}
      </div>
      <h3 className={styles.title}>{template.title}</h3>
    </div>
  );
};

/**
 * 精选模板展示组件
 */
const FeaturedTemplates: React.FC = () => {
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const [showLeftButton, setShowLeftButton] = useState(false);
  const [showRightButton, setShowRightButton] = useState(true);
  const [templates, setTemplates] = useState<Template[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  // 获取模板数据
  useEffect(() => {
    const fetchTemplates = async () => {
      try {
        setLoading(true);
        const data = await templateApi.getTemplates();
        setTemplates(data);
      } catch (error) {
        setError(error instanceof Error ? error.message : '获取模板数据失败');
        console.error('获取模板数据错误:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchTemplates();
  }, []);

  /**
   * 处理滚动事件
   * 根据滚动位置决定是否显示左右滚动按钮
   */
  const handleScroll = () => {
    if (scrollContainerRef.current) {
      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
      setShowLeftButton(scrollLeft > 0);
      setShowRightButton(scrollLeft < scrollWidth - clientWidth - 10);
    }
  };

  /**
   * 处理点击滚动按钮
   */
  const scroll = (direction: 'left' | 'right') => {
    if (scrollContainerRef.current) {
      const scrollAmount = 200;
      const newScrollLeft = scrollContainerRef.current.scrollLeft + 
        (direction === 'left' ? -scrollAmount : scrollAmount);
      
      scrollContainerRef.current.scrollTo({
        left: newScrollLeft,
        behavior: 'smooth'
      });
    }
  };

  if (loading) {
    return <div className={styles.loading}>加载中...</div>;
  }

  if (error) {
    return <div className={styles.error}>{error}</div>;
  }

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <h2>精选模板</h2>
        <a href="#" className={styles.more}>查看更多 &gt;</a>
      </div>
      <div className={styles.scrollContainer}>
        {/* 左滚动按钮 */}
        {showLeftButton && (
          <button 
            className={`${styles.scrollButton} ${styles.leftButton}`}
            onClick={() => scroll('left')}
          >
            &lt;
          </button>
        )}
        {/* 模板列表容器 */}
        <div 
          ref={scrollContainerRef}
          className={styles.templateList}
          onScroll={handleScroll}
        >
          {templates.map(template => (
            <TemplateCard key={template.id} template={template} />
          ))}
        </div>
        {/* 右滚动按钮 */}
        {showRightButton && (
          <button 
            className={`${styles.scrollButton} ${styles.rightButton}`}
            onClick={() => scroll('right')}
          >
            &gt;
          </button>
        )}
      </div>
    </div>
  );
};

export default FeaturedTemplates; 